<!DOCTYPE html>
<html >

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>模拟聊天</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        input {
            vertical-align: middle
        }

        .main {
            width: 300px;
            margin: 10px auto 0;
        }

        .dialog {
            height: 400px;
            border: 1px solid #ccc;
            overflow: auto
        }

        .talkArea {
            margin-top: 20px;
        }

        textarea {
            width: 298px;
            height: 100px;
            resize: none;
            border: 1px solid #ccc
        }

        p {
            overflow: hidden;
            margin-bottom: 20px;
            padding: 10px
        }

        p span {
            padding: 10px;
            background: #ddd;
        }

        button {
            height: 40px;
            width: 100px;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }
    </style>
</head>

<body>
    <div class="main">
        <div id="dialog" class="dialog">
            <div id="cont" class="cont">
                <p><span class="fl">hi</span></p>
                <p><span class="fl">我是你的专属客服</span></p>
                <p><span class="fl">请问有什么可以帮助你?</span></p>
            </div>
        </div>

        <div class="talkArea">
            <textarea id="textArea"></textarea>
            <p style="text-align:right;">
                <label style="font-size:12px; color:#999"><input id="checkbox" type="checkbox" /> 回车直接发言</label>
                <button id="btn" type="button" disabled>发言</button>
            </p>
        </div>
    </div>

</body>

</html>
<script>

    var arr = ['hi', "18", "我是美女", "谢谢", "你说啥??"];

    var dialog = document.getElementById('dialog');
    var cont = document.getElementById('cont');
    var oBtn = document.getElementById('btn');
    var textArea = document.getElementById('textArea');
    var chkBox = document.getElementById('checkbox');

    var txt = "";//保存输入内容


    //点击发送----------------------------------------------
    oBtn.onclick = send;

    function send() {
        cont.innerHTML += '<p><span class="fr">' + textArea.value + '</span></p>';

        dialog.scrollTop = dialog.scrollHeight - dialog.clientHeight;//设置滚动条在最底部

        oBtn.disabled = true;

        txt = textArea.value;

        textArea.value = "";

        //textArea.focus();

        //2秒后自动回话
        setTimeout(function () {
            switch (txt) {
                case "你好":
                    cont.innerHTML += '<p><span class="fl">' + arr[0] + '</span></p>';
                    break;
                case "你多大":
                    cont.innerHTML += '<p><span class="fl">' + arr[1] + '</span></p>';
                    break;
                case "你是男生女生":
                    cont.innerHTML += '<p><span class="fl">' + arr[2] + '</span></p>';
                    break;
                case "你真漂亮":
                    cont.innerHTML += '<p><span class="fl">' + arr[3] + '</span></p>';
                    break;
                default:
                    cont.innerHTML += '<p><span class="fl">' + arr[4] + '</span></p>';
            }
            dialog.scrollTop = dialog.scrollHeight - dialog.clientHeight;
        }, 2000);
    };


    //输入文本控制按钮状态---------------------------------------------
    textArea.onkeyup = function () {
        oBtn.disabled = this.value != "" ? false : true;
    };

    //控制回车直接发送----------------------------------------
    textArea.onkeydown = function (ev) {
        ev = ev || event;
        if (chkBox.checked && ev.keyCode == 13) {
            send();
            return false; //无法再进行输入(防止textarea内部回车)
        };
    };


</script>